<template>
  <q-dialog v-model="visible">
    <q-card style="max-height: calc(100vh - 2rem)">
      <q-card-section class="text-h6">创建任务</q-card-section>
      <q-separator/>
      <q-card-section class="q-gutter-sm q-pa-md">
        <amr-selector outlined v-model="task.device"/>
        <q-input rows="3" v-model="task.description" filled type="textarea" placeholder="在此输入对于任务的一些描述"/>
      </q-card-section>
      <q-separator/>
      <q-slide-transition>
        <q-card-section class="q-pa-none">
          <q-btn stretch @click="create" size="lg" class="full-width" color="primary" label="创建任务"/>
        </q-card-section>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script>
import { ref } from 'vue'
import { useQuasar } from 'quasar'
import { useAPIStore } from 'stores/api'
import { api } from 'boot/axios'
import AmrSelector from 'components/actionPlan/AmrSelector.vue'

export default {
  name: 'NewTask',
  components: { AmrSelector },
  setup (props, context) {
    const $q = useQuasar()
    const visible = ref(false)
    const task = ref({
      description: '',
      device: ''
    })

    return {
      visible,
      task,
      show () {
        visible.value = true
      },
      create () {
        api.post(useAPIStore().orderUrl + 'task', task.value).then(rs => {
          $q.notify({ type: 'positive', message: '运输任务创建成功' })
          context.emit('refresh')
          visible.value = false
        }).catch(() => {
          $q.notify({ type: 'negative', message: '运输任务创建出错' })
        })
      }
    }
  }
}
</script>
